import { FC, useEffect, useState, useRef } from 'react';
import {
  Form,
  Input,
  Checkbox,
  Link,
  Button,
  Space,
} from '@arco-design/web-react';
import NProgress from 'nprogress';
import { IconLock, IconUser } from '@arco-design/web-react/icon';
import { FormInstance } from '@arco-design/web-react/es/Form';
import { useNavigate } from 'react-router-dom';
const FormItem = Form.Item;
import styles from './style/index.module.less';
const LoginForm: React.FC<any> = () => {
  const formRef = useRef<FormInstance>();

  const [loading, setLoading] = useState(false);

  const navigate = useNavigate();

  function onSubmitClick() {
    console.log(formRef.current);
  }

  function goLogin() {
    NProgress.start();
    setLoading(true);

    // todo 请求接口
    setTimeout(() => {
      navigate('/', {
        replace: true,
      });
      NProgress.done();
    }, 3000);
  }
  return (
    <div className={styles['login-form-wrapper']}>
      <Form
        className={styles['login-form']}
        layout='vertical'
        initialValues={{ userName: 'admin', password: 'admin' }}
      >
        <Form.Item
          field='userName'
          rules={[{ required: true, message: '请输入账号' }]}
        >
          <Input
            prefix={<IconUser />}
            placeholder='用户名：admin'
            onPressEnter={onSubmitClick}
          />
        </Form.Item>
        <Form.Item
          field='password'
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input
            prefix={<IconLock />}
            placeholder='用户名：admin'
            onPressEnter={onSubmitClick}
          />
        </Form.Item>
        <FormItem>
          <Checkbox>记住密码</Checkbox>
        </FormItem>
        <FormItem>
          <Button type='primary' onClick={goLogin} loading={loading}>
            登陆
          </Button>
        </FormItem>
      </Form>
    </div>
  );
};

export default LoginForm;
